<!DOCTYPE html> 
<!--<html manifest="caches.manifest.php" > -->
<html> 
	<head> 
		<meta charset="utf-8" /> 
		<title>HTML5</title> 
		
		<link rel="stylesheet" href="http://www.html5rocks.com/static/css/base.css" /> 
		<link rel="stylesheet" href="http://www.html5rocks.com/static/css/prettify.css" /> 
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans:regular,bold" /> 
		<link rel="stylesheet" href="test.css" /> 
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
		<script src="http://www.html5rocks.com/static/js/modernizr-1.1.min.js"></script> 
		<script src="http://www.html5rocks.com/static/js/prettify.js"></script> 
		<script src="custom.js"><!-- hnjk--></script>
		<script src="customSQL.js"><!-- hnjk--></script> 
	</head>
<body> 
    <div id="wrap"> 
		<div id="content"> 
			<header id="section-header"> 
				<h1 id="title"><span class="normal">HTML</span><span class="five">5</span></h1> 
				<nav> 
					<ul> 
					  <li><a data-section="presentation" href="http://slides.html5rocks.com" target="_blank">Presentation</a></li> 
					  <li><a data-section="playground" href="http://playground.html5rocks.com">Playground</a></li> 
					  <li><a data-section="studio" href="http://studio.html5rocks.com">Studio</a></li> 
					  <li><a data-section="tutorials" href="/tutorials/">Tutorials</a></li> 
					  <li><a data-section="resources" href="/resources.html">Resources</a></li> 
					</ul> 
				</nav> 
			</header> 
			<nav> 
				<p class="breadcrumb"> 
					<a class="buttonlink" href="/"> 
						<span>Home</span> 
					</a >&gt; 
					<a class="buttonlink" href="/tutorials/"> 
						<span>Tutorials</span> 
					</a> &gt; Flexbox Quick Hits
				</p> 
			</nav>
			<article> 
				<header> 
					<h1>Quick hits with the Flexible Box Model</h1> 
					<div> 
						<span class="date"> 
							Paul Irish, <time pubdate>October 5th, 2010</time> 
						</span> 
					</div> 
					<span class="browser_support"> 
						<span>Supported browsers:</span> 
						<span class="browser_logos"> 
							<span class="opera "></span> 
							<span class="ie "></span> 
							<span class="safari supported"></span> 
							<span class="ff supported"></span> 
							<span class="chrome supported"></span> 
						</span> 
					</span> 
				</header>
				<div class="box">
					<div class="googleContainer">
						<iframe src="http://www.google.com" id="googleIframe"></iframe>
					</div>
					<div id="columns">
					  <div class="column" draggable="true"><header>A</header></div>
					  <div class="column" draggable="true"><header>B</header></div>
					  <div class="column" draggable="true"><header>C</header></div>
					</div>
					<nav> 
						<ul>
							<li><a href='#toc-intro'>Introduction</a></li>
							<li><a href='#toc-common'>Common flexbox style properties</a></li>
							<li><a href='#toc-flexibility'>What is flexibility?</a></li>
							<li><a href='#toc-basic'>A basic example</a></li>
							<li><a href='#toc-center'>Center stage: positioning in the middle</a></li>
							<li><a href='#toc-support'>Browser support</a></li>
							<li><a href='#toc-summary'>Summary</a></li>
						</ul> 
					</nav> 
				</div>
				<section class="articeText"> 
					<h2 id="toc-intro">Introduction</h2> 
					<p>
						I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page.
						As of yet, though, <abbr>CSS</abbr> has lacked a suitable mechanism for this task. Enter the <abbr>CSS</abbr>\
						3 Flexible Box Module, or <i>Flexbox</i> for short.
						I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page.
						As of yet, though, <abbr>CSS</abbr> has lacked a suitable mechanism for this task. Enter the <abbr>CSS</abbr>\
						3 Flexible Box Module, or <i>Flexbox</i> for short.
						I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page.
						As of yet, though, <abbr>CSS</abbr> has lacked a suitable mechanism for this task. Enter the <abbr>CSS</abbr>\
						3 Flexible Box Module, or <i>Flexbox</i> for short.
						I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page.
						As of yet, though, <abbr>CSS</abbr> has lacked a suitable mechanism for this task. Enter the <abbr>CSS</abbr>\
						3 Flexible Box Module, or <i>Flexbox</i> for short.
					</p>	
				</section>
			</article>
			<input type="text" id="todo" />
			<input type="button" id="todoButton" value="Add" />
			<section id="todoItems">
			</section>
			<footer> 
				<span class="note">This site contains information on APIs that are not part of the current W3C HTML5 specification.</span> 
			</footer> 
		</div> 
    </div> 
</body> 
</html> 